<template>
  <div class="chart" ref="echarts" />
</template>


<script>
import Chart from "@/plugins/Chart.js";
import { configure } from "./options.js";

export default {
  props: {
    datasource: {
      type: Array,
      required: true,
    },
  },

  computed: {
    chart() {
      return new Chart(this.$refs.echarts, "dark");
    },
  },

  methods: {
    draw() {
      this.chart.setOption(configure(this.datasource, "全部", "广西"));
      this.chart.on("click", (e) => {
        this.$emit("click", e.name);
      });
    },
  },

  watch: {
    datasource() {
      this.draw();
    },
  },

  mounted() {
    this.draw();
  },
};
</script>


<style lang="less" scoped>
.chart {
  width: 100%;
  height: 3.4rem;
  background-color: #0f375f;
}
</style>